<script setup>
import { ref } from 'vue'
import { getNewAlarm } from '@/assets/api/api'
const props = defineProps({
    title: {
        type: String,
        default: '最新告警',
    },
    deviceClassify: {
        type: String,
        default: '',
    },
    deviceClass: {
        type: String,
        default: '',
    },
})
const newAlarm = ref([])
function getData() {
    const params = {}
    if (props.deviceClassify) {
        params.deviceClassify = props.deviceClassify
    }
    if (props.deviceClass) {
        params.deviceClass = props.deviceClass
    }
    getNewAlarm(params).then((res) => {
        newAlarm.value = res.data
    })
}
getData()
defineExpose({ getData })

// 最新告警详情
import alarmDetail from '@/components/video/alarmDetail.vue'
const alarmShow = ref(false)
const activeAlarm = ref(null)
function showAlarm(item) {
    activeAlarm.value = item
    alarmShow.value = true
}
</script>
<template>
    <div class="dashboard-alarm white-box">
        <h4 class="hd">{{ title }}</h4>
        <div class="no-data" v-if="newAlarm.length == 0">暂无数据</div>
        <ul v-else class="dashboard-alarm-list">
            <li class="item" v-for="(item, index) in newAlarm" :key="index">
                <div class="d-flex">
                    <i class="iconfont icon-alarm-fill mr-10 color-danger"></i>
                    <p class="mr-10">{{ item.alarm_time }}</p>
                    <a
                        class="color-primary"
                        href="javascript:;"
                        @click="showAlarm(item)"
                    >
                        {{ item.alarm_type_name }}
                    </a>
                </div>
                <div class="d-flex">
                    <p v-if="item.is_handle == 0">
                        <span class="dot danger mr-5"></span>
                        <span class="color-danger">告警中</span>
                    </p>
                    <p v-else>
                        <span class="dot mr-5"></span>
                        <span class="color-danger">已处理</span>
                    </p>
                    <!-- <el-tag
                        type="info"
                        class="ml-10"
                        effect="dark"
                        v-if="index == 0"
                    >
                        一般
                    </el-tag>
                    <el-tag
                        type="info"
                        class="ml-10"
                        effect="dark"
                        v-else-if="index == 1"
                    >
                        一般
                    </el-tag>
                    <el-tag type="danger" class="ml-10" effect="dark" v-else>
                        紧急
                    </el-tag> -->
                </div>
            </li>
        </ul>
    </div>
    <!-- 告警详情 -->
    <alarmDetail
        :activeData="activeAlarm"
        v-model:visible="alarmShow"
        v-if="alarmShow"
    ></alarmDetail>
</template>
